<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Aether : XHTML Test Suit</title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<link type="text/css" rel="stylesheet" href="http://github.com/jquery/jquery-ui/raw/1.9m1/themes/base/jquery.ui.all.css" />
	<link type="text/css" rel="stylesheet" href="./ui.formvalidation.css" />

	<style type="text/css">
		body {
			font-size: 62.5%;
			font-family: Verdana;
		}

		p {
			font-size: 1.1em;
		}

		pre,code {
			font-size: 1.2em;
		}

		input,
		textarea,
		select,
		label {
			position: relative;
			text-align: left;
			outline: 0;
			padding: .4em;
			margin-right: .4em;

			font-size: 1.1em;

			display: -moz-inline-stack;
			display: inline-block;
			zoom: 1;
			*display: inline;
		}

		input {
			width: 12em;
		}

	</style>

	<script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/1.9m1/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/1.9m1/ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/1.9m1/ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/1.9m1/ui/jquery.ui.position.js"></script>
	<script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/1.9m1/ui/jquery.ui.tooltip.js"></script>
	<script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/1.9m1/ui/jquery.ui.progressbar.js"></script>

	<script src="./ui.formvalidation.js" type="text/javascript"></script>

	<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>

	<script type="text/javascript">

		$(function() {
			$('<div/>').css({
				position: "absolute",
				right: 10,
				top: 10
			}).appendTo(document.body).themeswitcher();

			// add a new validator for US Zipcodes so we can test a new one.
			$.formvalidation.addValidator('zipcode', function(value) {
				return value===''||/(^\d{5}$)|(^\d{5}-\d{4}$)/.test(value);
			}, 'is not a valid US zip code');

			function enable() {
				$('body > :input, body > label > :input')
					.formvalidation();

				$('#demo_0')
					.formvalidation('option', 'rules', { type: 'date', required: true });

				$('#demo_1')
					.formvalidation('option', 'rules', { required: true });

				$('#demo_2')
					.formvalidation('option', 'rules', { type: 'number' });

				$('#demo_3')
					.formvalidation('option', 'rules', { type: 'number', required: true });

				$('#demo_4')
					.formvalidation('option', 'rules', { type: 'email' });

				$('#demo_5')
					.formvalidation('option', 'rules', { type: 'url' });

				$('#demo_6a')
					.formvalidation('option', 'rules', { type: 'number' });

				$('#demo_7')
					.formvalidation('option', 'rules', { pattern: '^ABC$' });

				$('#demo_8')
					.formvalidation('option', 'rules', { type: 'zipcode' });

				$('#demo_9')
					.formvalidation('option', 'rules', { type: 'number', max: 99 });

				$('#demo_10')
					.formvalidation('option', 'rules', { type: 'number', min: 5 });

				$('#demo_11')
					.formvalidation('option', 'rules', { maxlength: 20 });

				$('#demo_12')
					.formvalidation('option', 'rules', { strength: 50 });

				$('#demo_12b')
					.formvalidation('option', 'rules', { equalto: 'demo_12' });

				$('#demo_13')
					.formvalidation('option', 'rules', { type: 'number', lessthan: 'demo_13a' });

				$('#demo_13a')
					.formvalidation('option', 'rules', { type: 'number', morethan: 'demo_13' });

				$('form').formvalidation();
			}
			enable();

			$("#disable").toggle(function() {
				$("*").formvalidation("disable");
			}, function() {
				$("*").formvalidation("enable");
			});
			$("#toggle").toggle(function() {
				$("*").formvalidation("destroy");
			}, function() {
				enable();
			});
		});

	</script>
</head>

<body>

	<h3>Demo Zero : date - is required</h3>

	<label for="demo_0">Demo 0</label>
	<input name="demo_0" id="demo_0" value="test" />

	<hr />

	<h3>Demo One : text - is required</h3>

	<label for="demo_1">Demo 1</label>
	<input name="demo_1" id="demo_1" value="" />

	<hr />

	<h3>Demo Two : number - not required</h3>

	<label for="demo_2">Demo 2</label>
	<input name="demo_2" id="demo_2" value="" />

	<hr />

	<h3>Demo Tree : number - is required</h3>

	<label for="demo_3">Demo 3</label>
	<input name="demo_3" id="demo_3" value="" />

	<hr />

	<h3>Demo Four : email validate</h3>

	<label for="demo_4">Demo 4</label>
	<input name="demo_4" id="demo_4" value="tester@example.com" />

	<hr />

	<h3>Demo Five : url validate</h3>

	<label for="demo_5">Demo 5</label>
	<input name="demo_5" id="demo_5" value="http://www.google.com/m" />

	<hr />

	<h3>Demo Six : inline Fields</h3>

	<p>This is some text before the <code>ui.formvalidation</code> widget <input name="demo_6a" id="demo_6a" value="" />  this is some text after the <code>ui.formvalidation</code> widget
		<input name="demo_6b" id="demo_6b" value=""/> and that was an unmodified input element.</p>

	<hr />

	<h3>Demo Seven : pattern 'abc' (case insensitive) only validate</h3>

	<label for="demo_7">Demo 7</label>
	<input name="demo_7" id="demo_7" value="http://www.google.com/m" />

	<hr />

	<h3>Demo Eight : Add an american zipcode validator and validate this value (input wrapped in label)</h3>

	<label>Demo 8 <input name="demo_8" id="demo_8" type="text" value="90210" /></label>

	<hr />

	<h3>Demo Nine : Number less than 100</h3>

	<label>Demo 9 <input name="demo_9" id="demo_9" value="90210" /></label>

	<hr />

	<h3>Demo Ten : Number greater than 4</h3>

	<label>Demo 10 <input name="demo_10" id="demo_10" value="90210" /></label>

	<hr />

	<h3>Demo Eleven : No longer than 20 characters</h3>

	<label>Demo 11 <input name="demo_11" id="demo_11" value="This is a long string value" maxlength="20" /></label>

	<hr />

	<h3>Demo 12 : Password Strength</h3>

	<label>Password <input name="demo_12" id="demo_12" type="password" value="" /></label><br/>
	<label>Re-enter Password <input name="demo_12b" id="demo_12b" type="password" value="" /></label>

	<hr />

	<h3>Demo 13 : Number Range</h3>

	<label>Start <input name="demo_13" id="demo_13" value="1" /></label>
	<label>End <input name="demo_13a" id="demo_13a" value="10" /></label>

	<hr/>

	<button id="disable">Toggle disabled</button>
	<button id="toggle">Toggle widget</button>

	<br />

	<br />

</body>
</html>